<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ol-tms-3857</title>
    <link rel="stylesheet" href="https://data.sunbt.ltd/lib/ol/v6.15.1/css/ol.css" type="text/css">
    <script src="https://data.sunbt.ltd/lib/ol/v6.15.1/build/ol.js"></script>
    <style>
        .map {
            height: 100vh;
            width: 100%;
        }
    </style>
</head>
<body>
<div id="map" class="map"></div>
<script>

    // 创建TMS图层
    var tmsLayer = new ol.layer.Tile({
        source: new ol.source.XYZ({
            url: 'http://localhost:18080/geoserver/gwc/service/tms/1.0.0/ly%3Aly_3201@EPSG%3A900913@png/{z}/{x}/{-y}.png', // 替换为你的GeoServer TMS URL
            tileSize: 256,
            // projection: 'EPSG:4326'
        })
    });


    let map = new ol.Map({
        target: 'map',
        layers: [
            tmsLayer
        ],
        view: new ol.View({
            center: ol.proj.fromLonLat([118.796877, 32.060255]), // 设置地图中心经纬度为南京
            zoom: 12, // 设置地图缩放级别
            maxZoom: 20,
            minZoom: 2
        })
    });
</script>
</body>
</html>
